import { Component, PropsWithChildren } from 'react'
import { View, Text, Image, Button } from '@tarojs/components'
import { AtIcon, AtTag } from "taro-ui"
import { getLiveBroadcast } from '../../api/home'
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {
  state: any
  constructor(props) {
    super(props)
    this.state = {
      tagsList: ['不限', '正在直播', '精彩回放'],
      LiveBroadcast: []
    }
  }
  componentWillMount() { }

  componentDidMount() {
    this.getliveBroadcast()
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  getliveBroadcast() {
    getLiveBroadcast().then((res) => {
      this.setState({
        LiveBroadcast: res.data.data
      })
    })
  }
  onClick() {
    Taro.switchTab({
      url: '/pages/index/index'
    })
  }
  render() {
    return (
      <View className='index'>
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <AtIcon onClick={this.onClick.bind(this)} className='icon' value='chevron-left' size='24' color='#fff'></AtIcon>
            <Text className='tit'>直播看房</Text>
          </View>
        </View>
        <View className='container'>
          <View className='tags'>
            {
              this.state.tagsList?.map((item: any, index: number) => {
                return <AtTag key={index} className={index === 0 ? 'tag' : ''} type='primary'>{item}</AtTag>
              })
            }
          </View>
          {
            this.state.LiveBroadcast?.map((item: any, index: number) => {
              return <View className='video' key={index}>
                <Button key={index} className={index === 0 ? 'btn1' : 'btn'}>{item.btn}</Button>
                <Button key={index} className={index === 1 ? 'btn2' : 'btn'}>{item.btn1}</Button>
                <Button key={index} className={index === 2 ? 'btn3' : 'btn'}>{item.btn2}</Button>
                <Image src={item.imgUrl} />
                <View className='name'>{item.title}</View>
                <View className='time'>
                  <AtIcon value={item.icon} size='24' color='#f90'></AtIcon>
                  <View>{item.date}</View>
                </View>
              </View>
            })
          }
          {/* <View className='video'>
            <Button className='btn1'>精彩回放</Button>
            <Image src='https://www.bwie.net/statics/PCindex/images/index_banner1.jpg' />
            <View className='name'>心悦尚城! 直播屋内精装格局</View>
            <View className='time'>
              <AtIcon value='video' size='24' color='#f90'></AtIcon>
              <View>2020-09-25 14:00</View>
            </View>
          </View>
          <View className='video'>
            <Button className='btn2'>正在直播</Button>
            <Image src='https://www.bwie.net/statics/PCindex/images/index_banner2.jpg' />
            <View className='name'>心悦尚城! 直播屋内精装格局</View>
            <View className='time'>
              <AtIcon value='video' size='24' color='#f90'></AtIcon>
              <View>2020-09-25 14:00</View>
            </View>
          </View>
          <View className='video1'>
            <Button className='btn3'>精彩回放</Button>
            <Image src='https://www.bwie.net/statics/PCindex/images/index_banner3.jpg' />
            <View className='name'>心悦尚城! 直播屋内精装格局</View>
            <View className='time'>
              <AtIcon value='video' size='24' color='#f90'></AtIcon>
              <View>2020-09-26 15:10</View>
            </View>
          </View> */}
        </View>
      </View >
    )
  }
}

// https://img1.baidu.com/it/u=1342130754,306943470&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img0.baidu.com/it/u=3295534422,3155222370&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img1.baidu.com/it/u=2064254833,770634332&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500
// https://img1.baidu.com/it/u=1144874046,3925078084&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375
// https://img2.baidu.com/it/u=3849720705,1881524056&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334
// https://img0.baidu.com/it/u=1649151030,2162866999&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500
// https://img1.baidu.com/it/u=1993417918,2447354163&fm=253&fmt=auto&app=120&f=JPEG?w=641&h=394

// 'https://www.bwie.net/statics/PCindex/images/index_banner1.jpg',
// 'https://www.bwie.net/statics/PCindex/images/index_banner2.jpg',
// 'https://www.bwie.net/statics/PCindex/images/index_banner3.jpg'